import styled, { css } from 'styled-components';
import { TStyledFlex } from './Flex.types';

/**
 * Компонент-контейнер для поля ввода.
 * @property {Direction} flexDirection - Направление осей флекс-контейнера.
 * @property {Alignment} alignItems - Выравнивание элементов по поперечной оси контейнера.
 * @property {AlignContent} alignContent - Выравнивание контента по поперечной оси контейнера.
 * @property {Justify} justifyContent - Выравнивание элементов по основной оси контейнера.
 * @property {Wrap} flexWrap - Перенос элементов, если они не помещаются в одну строку.
 * @property {string} flexFlow - Комбинированный свойство, объединяющее flex-direction и flex-wrap.
 * @property {string} flex - Гибкое управление размером элемента.
 * @property {number} flexGrow - Управление увеличением размера элемента внутри контейнера.
 * @property {string} flexBasis - Управление исходным размером элемента внутри контейнера.
 * @property {number} order - Порядок элемента внутри контейнера.
 * @property {Alignment} alignSelf - Выравнивание элемента по поперечной оси контейнера.
 * @property {boolean} inline - Указывает, является ли компонент блочным или строчным.
 */
export const StyledFlex = styled.div<TStyledFlex>`
  display: flex;
  box-sizing: border-box;

  ${({inline}) => inline && css`display: inline;`};

  ${({ flexDirection }) => flexDirection && css`
    flex-direction: ${flexDirection};
  `};

  ${({ alignContent }) => alignContent && css`
    align-content: ${alignContent};
  `};

  ${({ justifyContent }) => justifyContent && css`
    justify-content: ${justifyContent};
  `};

  ${({ flexWrap }) => flexWrap && css`
    flex-wrap: ${flexWrap};
  `};

  ${({ alignItems }) => alignItems && css`
    align-items: ${alignItems};
  `};

  ${({ flexFlow }) => flexFlow && css`
    flex-flow: ${flexFlow};
  `};

  ${({ flex }) => flex && css`
    flex: ${flex};
  `};

  ${({ flexGrow }) => flexGrow && css`
    flex-grow: ${flexGrow};
  `};

  ${({ flexBasis }) => flexBasis && css`
    flex-basis: ${flexBasis};
  `};

  ${({ order }) => order && css`
    order: ${order};
  `};

  ${({ alignSelf }) => alignSelf && css` 
    align-self: ${alignSelf};
  `};

  ${({ className }) => className && css`
    {className} {
      
    }
  `}

`;